<template>
	<div>
		<TypeNav />
		<div class="main">
			<div class="py-container">
				<!--bread-->
				<div class="bread">
					<ul class="fl sui-breadcrumb">
						<li>
							<a href="#">全部结果</a>
						</li>
					</ul>
					<ul class="fl sui-tag">
						<li class="with-x" v-if="searchParams.categoryName">
							{{ searchParams.categoryName }}
							<span @click="removeQuery">X</span>
						</li>
						<li class="with-x" v-if="searchParams.keyword">
							{{ searchParams.keyword }}
							<span @click="removeKeyword">X</span>
						</li>
						<li class="with-x" v-if="searchParams.trademark">
							{{ searchParams.trademark.split(":")[1] }}
							<span @click="removeTrademark">X</span>
						</li>
						<!-- 平台属性可能有多个 需要遍历 -->
						<li class="with-x" v-for="(attr, index) in searchParams.props">
							{{ attr.split(":")[1] }}
							<span @click="removeProps(index)">X</span>
						</li>
					</ul>
				</div>

				<!--selector-->
				<SearchSelector
					@getTmInfo="getTmInfo"
					@getProps="getProps"
					:trademarkList="trademarkList"
					:attrsList="attrsList"
				/>

				<!--details-->
				<div class="details clearfix">
					<div class="sui-navbar">
						<div class="navbar-inner filter">
							<ul class="sui-nav">
								<li
									:class="
										searchParams.order.split(':')[0] === '1' ? 'active' : ''
									"
									@click="selectOrder('1')"
								>
									<a
										>综合
										<i
											class="iconfont"
											v-show="searchParams.order.split(':')[0] === '1'"
											:class="{
												'icon-up': searchParams.order.split(':')[1] === 'asc',
												'icon-down':
													searchParams.order.split(':')[1] === 'desc',
											}"
										></i
									></a>
								</li>
								<li
									:class="
										searchParams.order.split(':')[0] === '2' ? 'active' : ''
									"
									@click="selectOrder('2')"
								>
									<a
										>价格
										<i
											class="iconfont"
											v-show="searchParams.order.split(':')[0] === '2'"
											:class="{
												'icon-up': searchParams.order.split(':')[1] === 'asc',
												'icon-down':
													searchParams.order.split(':')[1] === 'desc',
											}"
										></i
									></a>
								</li>
							</ul>
						</div>
					</div>
					<div class="goods-list">
						<ul class="yui3-g">
							<li class="yui3-u-1-5" v-for="good in goodsList" :key="good.id">
								<div class="list-wrap">
									<div class="p-img">
										<router-link
											:to="{
												name: 'detail',
												params: {
													skuId: good.id,
												},
											}"
											><img v-lazy="good.defaultImg"
										/></router-link>
									</div>
									<div class="price">
										<strong>
											<em>¥</em>
											<i>{{ good.price }}</i>
										</strong>
									</div>
									<div class="attr">
										<a href="###">{{ good.title }}</a>
									</div>
									<div class="commit">
										<i class="command">已有<span>2000</span>人评价</i>
									</div>
									<div class="operate">
										<a
											href="success-cart.html"
											target="_blank"
											class="sui-btn btn-bordered btn-danger"
											>加入购物车</a
										>
										<a href="javascript:void(0);" class="sui-btn btn-bordered"
											>收藏</a
										>
									</div>
								</div>
							</li>
						</ul>
					</div>
					<Pagination
						:totolPages="totalPages"
						:continuePages="continuePage"
						:pageNo="searchParams.pageNo"
						@changePageNo="changePageNo"
					/>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import SearchSelector from "./SearchSelector/SearchSelector";
import { reqSearchList } from "@/api";
export default {
	name: "Search",

	components: {
		SearchSelector,
	},
	data() {
		return {
			//搜索参数对象初始值
			searchParams: {
				category1Id: null,
				category2Id: null,
				category3Id: null,
				categoryName: "",
				keyword: "",
				order: "1:desc", //综合是1 价格是2  升序是asc 降序是desc
				pageNo: 1, //当前页
				pageSize: 100,
				props: [],
				trademark: "",
			},
			attrsList: [],
			goodsList: [],
			trademarkList: [],
			totalPages: 0, //数据的总页数
			continuePage: 3, //连续页的个数
		};
	},
	mounted() {
		//1.初始化进入的时候要获取路由地址携带的参数
		this.initSearchParams();

		//2.初始化请求搜索详情数据
		this.getSearchList();
	},

	methods: {
		// 1.获取搜索列表的数据方法
		async getSearchList() {
			try {
				const re = await reqSearchList(this.searchParams);
				//获取数据
				this.attrsList = re.attrsList;
				this.goodsList = re.goodsList;
				this.trademarkList = re.trademarkList;
				this.totalPages = re.totalPages;
			} catch (e) {
				alert(e.message);
			}
		},

		//2.在请求前获取路由地址内参数的方法
		initSearchParams() {
			//1.获取query参数
			const { category1Id, category2Id, category3Id, categoryName } =
				this.$route.query;
			//2.获取params参数
			const { keyword } = this.$route.params;
			//把新获取的参数和初始的searchParams进行合并
			this.searchParams = {
				...this.searchParams,
				category1Id,
				category2Id,
				category3Id,
				categoryName,
				keyword,
			};
		},

		//3. 删除query参数的面包屑
		removeQuery() {
			//直接删除searchParams中的id和name(只要categoryName没有值了,则面包屑就会消失,只要searchParams修改了,则会重新发送请求)
			this.searchParams = {
				...this.searchParams,
				category1Id: null,
				category2Id: null,
				category3Id: null,
				categoryName: "",
			};
			//因为把params的参数删除了,所以我们路由的地址也要发生变化(重新导航即可)
			//我们需要把可能存在的params参数保留,只是删除了query
			const params = this.$route.params;
			this.$router.push({
				name: "search",
				params,
			});
		},

		//4. 删除keyword参数的面包屑
		removeKeyword() {
			//先把searchParams参数修改
			this.searchParams.keyword = "";

			//重新进行路由导航
			const query = this.$route.query;
			this.$router.push({
				name: "search",
				query,
			});

			//通知Header组件清空keyword
			this.$bus.$emit("clearKeyword");
		},
		//5.接受品牌信息的自定义事件回调函数
		getTmInfo(tmInfo) {
			//修改parmas参数
			this.searchParams.trademark = tmInfo;
		},

		//6. 删除品牌的面包屑事件函数
		removeTrademark() {
			//修改parmas参数
			this.searchParams.trademark = "";
		},

		// 7.接收attr平台属性的自定义事件回调函数
		getProps(props) {
			if (this.searchParams.props.includes(props)) return;
			// 修改parmas参数
			this.searchParams.props.push(props);
		},

		//8. props的面包屑删除事件
		removeProps(index) {
			this.searchParams.props.splice(index, 1);
		},

		//9.点击排序的事件函数
		selectOrder(type) {
			//先判断之前的排序是价格还是综合,来决定下一步的操作
			const oldType = this.searchParams.order.split(":")[0];
			const oldOrder = this.searchParams.order.split(":")[1];

			//如果本次点击的类型和之前是一样的,则直接让排序规则取反
			if (type === oldType) {
				//拼接新的order值
				const newOrder = type + ":" + (oldOrder === "desc" ? "asc" : "desc");
				//修改参数
				this.searchParams.order = newOrder;
			} else {
				const newOrder = type + ":" + "desc";
				this.searchParams.order = newOrder;
			}
		},

		//10.接收来自页码pagination组件传递过来的当前页的值
		changePageNo(newPage) {
			this.searchParams.pageNo = newPage;
		},
	},

	watch: {
		//1. 监听动态路由的参数变化(个人理解:相当于只要路由信息一变,就立马拿着路由传递的新的信息,去合并data的searchParams数据)
		$route() {
			//重新获取路由内的信息改变 searchParams参数
			this.initSearchParams();
		},

		//2. 监听搜索参数的改变,重新发送请求(而只要searchParams数据一变,就会拿着现在的数据重新去获取新的对应匹配的数据)
		// 特点:这就形成了一个闭环, 只要切换组件了, 地址路由改变了, 就会拿路由信息, 然后自动去请求新数据,然后渲染到页面
		searchParams: {
			deep: true,
			handler() {
				//重新请求搜索详情数据
				this.getSearchList();
			},
		},
	},
};
</script>

<style lang="less" scoped>
.main {
	margin: 10px 0;

	.py-container {
		width: 1200px;
		margin: 0 auto;

		.bread {
			margin-bottom: 5px;
			overflow: hidden;

			.sui-breadcrumb {
				padding: 3px 15px;
				margin: 0;
				font-weight: 400;
				border-radius: 3px;
				float: left;

				li {
					display: inline-block;
					line-height: 18px;

					a {
						color: #666;
						text-decoration: none;

						&:hover {
							color: #4cb9fc;
						}
					}
				}
			}

			.sui-tag {
				margin-top: -5px;
				list-style: none;
				font-size: 0;
				line-height: 0;
				padding: 5px 0 0;
				margin-bottom: 18px;
				float: left;

				.with-x {
					font-size: 12px;
					margin: 0 5px 5px 0;
					display: inline-block;
					overflow: hidden;
					color: #000;
					background: #f7f7f7;
					padding: 0 7px;
					height: 20px;
					line-height: 20px;
					border: 1px solid #dedede;
					white-space: nowrap;
					transition: color 400ms;
					cursor: pointer;

					i {
						margin-left: 10px;
						cursor: pointer;
						font: 400 14px tahoma;
						display: inline-block;
						height: 100%;
						vertical-align: middle;
					}

					&:hover {
						color: #28a3ef;
					}
				}
			}
		}

		.details {
			margin-bottom: 5px;

			.sui-navbar {
				overflow: visible;
				margin-bottom: 0;

				.filter {
					min-height: 40px;
					padding-right: 20px;
					background: #fbfbfb;
					border: 1px solid #e2e2e2;
					padding-left: 0;
					border-radius: 0;
					box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065);

					.sui-nav {
						position: relative;
						left: 0;
						display: block;
						float: left;
						margin: 0 10px 0 0;

						li {
							float: left;
							line-height: 18px;

							a {
								display: block;
								cursor: pointer;
								padding: 11px 15px;
								color: #777;
								text-decoration: none;
							}

							&.active {
								a {
									background: #e1251b;
									color: #fff;
								}
							}
						}
					}
				}
			}

			.goods-list {
				margin: 20px 0;

				ul {
					display: flex;
					flex-wrap: wrap;

					li {
						height: 100%;
						width: 20%;
						margin-top: 10px;
						line-height: 28px;

						.list-wrap {
							.p-img {
								padding-left: 15px;
								width: 215px;
								height: 255px;

								a {
									color: #666;

									img {
										max-width: 100%;
										height: auto;
										vertical-align: middle;
									}
								}
							}

							.price {
								padding-left: 15px;
								font-size: 18px;
								color: #c81623;

								strong {
									font-weight: 700;

									i {
										margin-left: -5px;
									}
								}
							}

							.attr {
								padding-left: 15px;
								width: 85%;
								overflow: hidden;
								margin-bottom: 8px;
								min-height: 38px;
								cursor: pointer;
								line-height: 1.8;
								display: -webkit-box;
								-webkit-box-orient: vertical;
								-webkit-line-clamp: 2;

								a {
									color: #333;
									text-decoration: none;
								}
							}

							.commit {
								padding-left: 15px;
								height: 22px;
								font-size: 13px;
								color: #a7a7a7;

								span {
									font-weight: 700;
									color: #646fb0;
								}
							}

							.operate {
								padding: 12px 15px;

								.sui-btn {
									display: inline-block;
									padding: 2px 14px;
									box-sizing: border-box;
									margin-bottom: 0;
									font-size: 12px;
									line-height: 18px;
									text-align: center;
									vertical-align: middle;
									cursor: pointer;
									border-radius: 0;
									background-color: transparent;
									margin-right: 15px;
								}

								.btn-bordered {
									min-width: 85px;
									background-color: transparent;
									border: 1px solid #8c8c8c;
									color: #8c8c8c;

									&:hover {
										border: 1px solid #666;
										color: #fff !important;
										background-color: #666;
										text-decoration: none;
									}
								}

								.btn-danger {
									border: 1px solid #e1251b;
									color: #e1251b;

									&:hover {
										border: 1px solid #e1251b;
										background-color: #e1251b;
										color: white !important;
										text-decoration: none;
									}
								}
							}
						}
					}
				}
			}

			.page {
				width: 733px;
				height: 66px;
				overflow: hidden;
				float: right;

				.sui-pagination {
					margin: 18px 0;

					ul {
						margin-left: 0;
						margin-bottom: 0;
						vertical-align: middle;
						width: 490px;
						float: left;

						li {
							line-height: 18px;
							display: inline-block;

							a {
								position: relative;
								float: left;
								line-height: 18px;
								text-decoration: none;
								background-color: #fff;
								border: 1px solid #e0e9ee;
								margin-left: -1px;
								font-size: 14px;
								padding: 9px 18px;
								color: #333;
							}

							&.active {
								a {
									background-color: #fff;
									color: #e1251b;
									border-color: #fff;
									cursor: default;
								}
							}

							&.prev {
								a {
									background-color: #fafafa;
								}
							}

							&.disabled {
								a {
									color: #999;
									cursor: default;
								}
							}

							&.dotted {
								span {
									margin-left: -1px;
									position: relative;
									float: left;
									line-height: 18px;
									text-decoration: none;
									background-color: #fff;
									font-size: 14px;
									border: 0;
									padding: 9px 18px;
									color: #333;
								}
							}

							&.next {
								a {
									background-color: #fafafa;
								}
							}
						}
					}

					div {
						color: #333;
						font-size: 14px;
						float: right;
						width: 241px;
					}
				}
			}
		}
	}
}
</style>
